<template>
    <div class="container OrderList" style="width:99%;margin-top:-25px;">
        <!-- 查询条件 -->
        <div class="query-box">
            <el-form :model="queryBox" status-icon ref="queryBox">
                <div class="schoolBoxCont">
                    <div class="schoolBoxContItem">
                        <el-form-item label prop="name">
                            <div class="schoolBoxContItemTitle">总订单号</div>
                            <div class="schoolBoxContItemInput">
                                <el-input clearable v-model="queryBox.orderSno" placeholder="总订单号"></el-input>
                            </div>
                        </el-form-item>
                    </div>
                    <div class="schoolBoxContItem">
                        <el-form-item label prop="name">
                            <div class="schoolBoxContItemTitle">子订单号</div>
                            <div class="schoolBoxContItemInput">
                                <el-input clearable v-model="queryBox.orderChildSno" placeholder="子订单号"></el-input>
                            </div>
                        </el-form-item>
                    </div>
                    <div class="schoolBoxContItem">
                        <el-form-item label prop="name">
                            <div class="schoolBoxContItemTitle">学生姓名</div>
                            <div class="schoolBoxContItemInput">
                                <el-input clearable v-model="queryBox.studentName" placeholder="学生姓名"></el-input>
                            </div>
                        </el-form-item>
                    </div>
                    <div class="schoolBoxContItem">
                        <el-form-item label prop="name">
                            <div class="schoolBoxContItemTitle">用户名</div>
                            <div class="schoolBoxContItemInput">
                                <el-input clearable v-model="queryBox.studentUserName" placeholder="用户名"></el-input>
                            </div>
                        </el-form-item>
                    </div>
                    <div class="schoolBoxContItem">
                        <el-form-item label prop="name">
                            <div class="schoolBoxContItemTitle">手机号</div>
                            <div class="schoolBoxContItemInput">
                                <el-input clearable v-model="queryBox.studentPhone" placeholder="手机号"></el-input>
                            </div>
                        </el-form-item>
                    </div>
                    <div class="schoolBoxContItem">
                        <el-form-item label prop="name">
                            <div class="schoolBoxContItemTitle">年级</div>
                            <div class="schoolBoxContItemInput">
                                <el-select clearable filterable v-model="queryBox.grade">
                                    <el-option
                                        v-for="item in studentGradeOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                    </div>
                    <div class="schoolBoxContItem">
                        <el-form-item label prop="name">
                            <div class="schoolBoxContItemTitle">学科</div>
                            <div class="schoolBoxContItemInput">
                                <el-select
                                    v-model="queryBox.specialty"
                                    filterable
                                    clearable
                                    placeholder="请选择"
                                    value-key="id"
                                    style="width: 100%;"
                                >
                                    <el-option
                                        v-for="item in specialtyOptions"
                                        :key="item.code"
                                        :label="item.name"
                                        :value="item.code"
                                    ></el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                    </div>
                    <div class="schoolBoxContItem">
                        <el-form-item label prop="name">
                            <div class="schoolBoxContItemTitle">分校名称</div>
                            <div class="schoolBoxContItemInput">
                                <el-select
                                    v-model="queryBox.branchCode"
                                    filterable
                                    clearable
                                    placeholder="请选择"
                                    value-key="id"
                                    style="width: 100%;"
                                >
                                    <el-option
                                        v-for="item in branchcenterOption"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.code"
                                    ></el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                    </div>
                    <div class="schoolBoxContItem">
                        <el-form-item label prop="name">
                            <div class="schoolBoxContItemTitle">商品类型</div>
                            <div class="schoolBoxContItemInput">
                                <el-select
                                    v-model="queryBox.payMode"
                                    filterable
                                    clearable
                                    placeholder="请选择"
                                    style="width: 100%;"
                                >
                                    <el-option
                                        v-for="item in goodsTypeOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                    </div>
                    <!-- <div class="schoolBoxContItem">
                        <el-form-item label prop="name">
                            <div class="schoolBoxContItemTitle">优惠方式</div>
                            <div class="schoolBoxContItemInput">
                                <el-select
                                    v-model="queryBox.centerCode"
                                    filterable
                                    clearable
                                    placeholder="请选择"
                                    value-key="id"
                                    style="width: 100%;"
                                >
                                    <el-option
                                        v-for="item in branchcenterOption"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.code"
                                    ></el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                    </div> -->
                    <div class="schoolBoxContItem">
                        <el-form-item label prop="name">
                            <div class="schoolBoxContItemTitle">商品名称</div>
                            <div class="schoolBoxContItemInput">
                                <el-input clearable v-model="queryBox.goodsName" placeholder="商品名称"></el-input>
                            </div>
                        </el-form-item>
                    </div>
                    <div class="schoolBoxContItem">
                        <el-form-item label prop="name">
                            <div class="schoolBoxContItemTitle">支付方式</div>
                            <div class="schoolBoxContItemInput">
                                <el-select
                                    v-model="queryBox.payMode"
                                    filterable
                                    clearable
                                    placeholder="请选择"
                                    style="width: 100%;"
                                >
                                    <el-option
                                        v-for="item in orderPayModeList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                    </div>
                    <!-- <div class="schoolBoxContItem">
                        <el-form-item label prop="name">
                            <div class="schoolBoxContItemTitle">支付平台</div>
                            <div class="schoolBoxContItemInput">
                                <el-select
                                    v-model="queryBox.payPlatform"
                                    filterable
                                    clearable
                                    placeholder="请选择"
                                    value-key="id"
                                    style="width: 100%;"
                                >
                                    <el-option
                                        v-for="item in branchcenterOption"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.code"
                                    ></el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                    </div> -->
                    <div class="schoolBoxContItem">
                        <el-form-item label prop="name">
                            <div class="schoolBoxContItemTitle">业务线</div>
                            <div class="schoolBoxContItemInput">
                                <el-select clearable filterable v-model="queryBox.businessType">
                                    <el-option
                                        v-for="item in studentBusinessOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                    </div>
                    <div class="schoolBoxContItem">
                        <el-form-item label prop="name">
                            <div class="schoolBoxContItemTitle">渠道</div>
                            <div class="schoolBoxContItemInput">
                                <el-cascader
                                clearable
                                filterable
                                :key="is_cascader"
                                v-model="queryBox.studentDataFrom"
                                :props="addressProps"
                                :options="resources_Options2"
                                placeholder="客户来源"
                            ></el-cascader>
                            </div>
                        </el-form-item>
                    </div>
                    <div class="schoolBoxContItem">
                        <el-form-item label prop="name">
                            <div class="schoolBoxContItemTitle">订单类型</div>
                            <div class="schoolBoxContItemInput">
                                <el-select clearable filterable v-model="queryBox.orderType">
                                    <el-option
                                        v-for="item in orderTypeOptions"
                                        :key="item.key"
                                        :label="item.value"
                                        :value="item.key"
                                    ></el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                    </div>
                    <div class="schoolBoxContItem">
                        <el-form-item label prop="name">
                            <div class="schoolBoxContItemTitle">订单状态</div>
                            <div class="schoolBoxContItemInput">
                                <el-select clearable filterable v-model="queryBox.payState">
                                    <el-option
                                        v-for="item in payStateOpitions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                    </div>
                    <div class="schoolBoxContItem">
                        <el-form-item label prop="name">
                            <div class="schoolBoxContItemTitle">审核状态</div>
                            <div class="schoolBoxContItemInput">
                                <el-select clearable filterable v-model="queryBox.examineState">
                                    <el-option
                                        v-for="item in examineTypeOptions"
                                        :key="item.key"
                                        :label="item.value"
                                        :value="item.key"
                                    ></el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                    </div>
                    <div class="schoolBoxContItem">
                        <el-form-item label prop="name">
                            <div class="schoolBoxContItemTitle" style="width:115px">创建时间</div>
                            <div class="schoolBoxContItemInput" style="width:428px">
                                <el-date-picker
                                    v-model="createTime"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :default-time="['00:00:00', '23:59:59']"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    format="yyyy-MM-dd HH:mm:ss"
                                ></el-date-picker>
                            </div>
                        </el-form-item>
                    </div>
                    <div class="schoolBoxContItem">
                        <el-form-item label prop="name">
                            <div class="schoolBoxContItemTitle" style="width:115px">审核时间</div>
                            <div class="schoolBoxContItemInput" style="width:428px">
                                <el-date-picker
                                    v-model="examineTime"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :default-time="['00:00:00', '23:59:59']"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    format="yyyy-MM-dd HH:mm:ss"
                                ></el-date-picker>
                            </div>
                        </el-form-item>
                    </div>
                    <div class="schoolBoxContItem">
                        <el-form-item label prop="name">
                            <div class="schoolBoxContItemTitle" style="width:115px">支付时间</div>
                            <div class="schoolBoxContItemInput" style="width:428px">
                                <el-date-picker
                                    v-model="payTime"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :default-time="['00:00:00', '23:59:59']"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    format="yyyy-MM-dd HH:mm:ss"
                                ></el-date-picker>
                            </div>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
            <div class="from-btns">
                <kt-button
                    :label="$t('action.reset')"
                    perms="true"
                    type="primary"
                    @click="reset('queryBox')"
                />
                <kt-button
                    :label="$t('action.search')"
                    perms="true"
                    type="primary"
                    @click="search"
                />
            </div>
            <div class=" fr">
                <kt-button
                    :label="$t('财务导出（带手机号）')"
                    type="primary"
                    perms="OrderInfoMange:OrderList:FinanceExport"
                    @click="handleExport"
                    style="float:left;margin-bottom:20px"
                />
                <kt-button
                    :label="$t('导出')"
                    type="primary"
                    perms="OrderInfoMange:OrderList:export"
                    @click="handleExport"
                    style="float:left;margin-bottom:20px"
                />
            </div>
            <!--表格内容栏-->
            <div class="btn">
                <Crm-table
                    OrderList
                    class="table-width"
                    :showOverflowTooltip='false'
                    :showOperation='false'
                    width="400"
                    :data="pageResult"
                    :columns="columns"
                    :loading="loading"
                    @findPage="findPage"
                    @handleSee='handleSee'
                    @handleToSee='handleReview'
                    @handleDeleteDic='changeOrder'
                    @handleCoutomersort='refundOrder'
                    @handleEdit='handleEdit'
                ></Crm-table>
            </div>
        </div>
        <div v-if="checkOrderShow">
            <CheckOrder
                :checkOrderShow="checkOrderShow"
                v-if="checkOrderShow"
                :checkOrderData="checkOrderData"
                @closeCheckOrderShow="closeCheckOrderShow"
            ></CheckOrder>
        </div>
        <!-- 退单 -->
        <div v-if='refundOrderShow'>
            <Refund-Order v-if='refundOrderShow' :refundOrderShow='refundOrderShow' :refundOrderData='refundOrderData' @closeRefundOrder='closeRefundOrder'></Refund-Order>
        </div>
    </div>
</template>
<script>
import KtButton from "@/views/Core/KtButton";
import CrmTable from "@/views/Core/CrmTable";
import axios from "axios";
import { baseUrl } from "@/utils/global";
import CheckOrder from "@/views/Core/checkOrder";
import RefundOrder from "@/views/OrderInfoMange/RefundOrder";
export default {
    name: "School",
    components: {
        CrmTable,
        KtButton,
        axios,
        baseUrl,
        CheckOrder,
        RefundOrder
    },
    data() {
        return {
            queryBox: {
                orderNumber: "",
                phone: "",
                businessType: "",
                departmentId: "",
                payType: "",
                realName: "",
                createDateStart:"",
                createDateEnd:'',
                examineDateStart:'',
                examineDateEnd:'',
                studentDataFrom:[]
            },
            checkOrderShow: false,
            checkOrderData: {
                gradeList: []
            },
            orderType: false,
            orderTypeValue: "",
            columns: [
                { type: "index", label: "序号", minWidth: 50 },
                { prop: "orderNo", label: "总订单号", minWidth: 150 },
                { prop: "orderChildNo", label: "子订单号", minWidth: 150 },
                { prop: "payNumber", label: "交易单号", minWidth: 150 },
                { prop: "organizationCode", label: "校区名称", minWidth: 80 },
                { prop: "studentName", label: "学生姓名", minWidth: 100 },
                { prop: "studentUserName", label: "用户名", minWidth: 100 },
                { prop: "studentPhone", label: "手机号", minWidth:100 },
                { prop: "studentGradeStr", label: "年级", minWidth:100 },
                { prop: "goodsName", label: "商品名称", minWidth: 200 },
                { prop: "goodsPrice", label: "商品原价", minWidth: 80 }, 
                { prop: "goodsRealPrice", label: "商品现价", minWidth: 80 },
                { prop: "goodsDiscountPrice", label: "限时促销价", minWidth: 80 },
                { prop: "studentUserName", label: "邮费", minWidth: 80 },
                { prop: "studentUserName", label: "优惠券", minWidth: 80 },
                // { prop: "crystalCount", label: "水晶", minWidth: 80 },
                // { prop: "coinCount", label: "学币", minWidth: 80 },
                { prop: "price", label: "应收/退金额", minWidth: 100 },
                { prop: "payMode", label: "支付方式", minWidth: 80 },
                { prop: "payPlatform", label: "支付平台", minWidth: 80 },
                { prop: "businessLineName", label: "业务线", minWidth: 80 },
                { prop: "payState", label: "订单状态", minWidth: 80 },
                { prop: "orderTypeStr", label: "订单类型", minWidth: 80 },
                { prop: "examineStateStr", label: "审核状态", minWidth: 80 },
                { prop: "createPeople", label: "下单人", minWidth: 80 },
                { prop: "examinePeople", label: "审核人", minWidth: 80 },
                { prop: "createTime", label: "创建时间", minWidth: 145 },
                { prop: "examineTime", label: "审核时间", minWidth: 145 },
                { prop: "payTime", label: "支付时间", minWidth: 145 },
            ],
            pageResult: {
                content: []
            },
            orderTypeOptions:[],
            examineTypeOptions:[],
            branchcenterOption: [],
            resources_Options2: [],
            is_cascader: Math.random(), //重新渲染标识key
            addressProps: {
                label: "codeValue",
                value: "codeKey",
                lazy: true, //开启异步加载
                lazyLoad(node, resolve) {
                    const { value, level } = node;
                    axios
                        .get(baseUrl + "/code/queryStudentDataFromByGroupId", {
                            params: { id: node.value }
                        })
                        .then(res => {
                            let response = res.data;

                            if (response.result == 1) {
                                resolve(
                                    response.data.map(item => {
                                        item.label = item.label;
                                        item.value = item.codeKey;
                                        item.leaf = "leaf"; //这个必须加，就是让组件识别是不是最后一级
                                        return item;
                                    })
                                );
                            }
                        });
                }
            },
            studentBusinessType: [],
            examineTime:[],
            createTime:[],
            studentGradeOptions:[],
            specialtyOptions:[],
            orderPayModeList:[],
            studentBusinessOptions:[],
            payStateOpitions:[],
            payTime:[],
            studentGradeDL:JSON.parse(localStorage.getItem("studentGradeDL")),
            student_data_from_options2:JSON.parse(localStorage.getItem("studentSource")),
            refundOrderShow:false,
        };
    },
    beforeMount(){
        // 大C端订单类型
        this.$api.user.optionsList({ codeType: "student_bigc_order_type" }).then(res => {
            if (res.result == 1) {
                this.orderTypeOptions = res.keyValueList;
            }
        });
        // 大C端订单审核状态
        this.$api.user.optionsList({ codeType: "student_bigc_order_examine_type" }).then(res => {
            if (res.result == 1) {
                this.examineTypeOptions = res.keyValueList;
            }
        });
        //分中心
        this.$api.dropdown.branchcenter().then(res => {
            this.branchcenterOption = res.branchCenterInfoList;
        });
        // 渠道
        this.$api.dropdown.studentDataFromGroup().then(res => {
            if (res.result == 1) {
                this.resources_Options = res.keyValueList;
                let arr = res.keyValueList;
                this.resources_Options2 = arr.map(item => {
                    item.codeValue = item.value;
                    item.codeKey = item.key;
                    return item;
                });
            }
        });
        // 获取业务线
        this.studentBusinessType = JSON.parse(
            localStorage.getItem("studentBusinessType")
        );
        // 下拉菜单
        this.$api.student
        .listOrderPropertyJson()
        .then(res => {
            if (res.result == 2) {
                this.$message({ message: res.msg, type: 'error' });
            } else {
                let data=JSON.parse(res.msg)
                
                this.studentGradeOptions=data.gradeList
                this.specialtyOptions=data.specialtyList
                this.orderPayModeList=data.orderPayModeList
                this.studentBusinessOptions=data.businessLineList
                this.payStateOpitions=data.orderPayStateList
            }
        });
        this.$api.student
        .listGoodsPropertyJson()
        .then(res => {
            if (res.result == 2) {
                this.$message({ message: res.msg, type: 'error' });
            } else {
                let data=JSON.parse(res.msg)
                this.goodsTypeOptions=data.goodsTypeList
                
            }
        });
        
    },
    methods: {
        search(){
            this.queryBox.studentDataFrom = this.queryBox.studentDataFrom.toString();
            this.queryBox.dataFrom = this.queryBox.studentDataFrom.split(",")[1];
            if (this.createTime != null) {
                this.queryBox.createDateStart = this.createTime[0];
                this.queryBox.createDateEnd = this.createTime[1];
            } else {
                this.queryBox.createDateStart = "";
                this.queryBox.createDateEnd = "";
            }
            if (this.examineTime != null) {
                this.queryBox.examineDateStart = this.examineTime[0];
                this.queryBox.examineDateEnd = this.examineTime[1];
            } else {
                this.queryBox.examineDateStart = "";
                this.queryBox.examineDateEnd = "";
            }
            this.pageRequest.pageNum = 1;
            this.findPage(null);
        },
        listGoodsPropertyJson() {
            return new Promise(resolve => {
                this.$api.student.listGoodsPropertyJson().then(res => {
                    if (res.result == 2) {
                        this.$message({ message: res.msg, type: "error" });
                    } else {
                        // 获取下拉列表
                        let data = JSON.parse(res.msg);
                        resolve(data);
                    }
                });
            });
        },
         // 获取分页数据
        findPage: function(data) {
            if (data !== null) {
                this.loading = true;
                this.pageRequest = data.pageRequest;
            }  
            this.queryBox.pageNum = this.pageRequest.pageNum;
            this.queryBox.pageSize = this.pageRequest.pageSize;
            this.queryBox.payStatus=this.queryBox.payStatus1
            this.$api.student
                .studentBigcOrderInfoList(this.queryBox)
                .then(res => {
                    let content = { content: res.data, totalSize: res.total };
                    
                        content.content.forEach(item => {
                            // this.listGoodsPropertyJson().then(data=>{
                            //     data.gradeList.forEach(k=>{
                            //         if(k.value==item.studentGrade){
                            //             item.studentGradeStr=k.label
                            //         }
                            //     })
                                this.orderTypeOptions.forEach(s=>{
                                    if(s.key==item.type){
                                        item.orderTypeStr=s.value
                                    }
                                })
                                this.examineTypeOptions.forEach(s=>{
                                    if(s.key==item.examineState){
                                        item.examineStateStr=s.value
                                    }
                                })
                                
                            // })
                        });
                    
                    this.pageResult = content;

                    this.loading = false;
                })
                .then(data != null ? data.callback : "");
        },
        reset(){
            this.queryBox.examineDateStart = "";
            this.queryBox.examineDateEnd = "";
            this.queryBox.createDateStart = "";
            this.queryBox.createDateEnd = "";
            this.createTime=[]
            this.examineTime=[]
            this.payTime=[]
            this.queryBox={
                orderNumber: "",
                phone: "",
                businessType: "",
                departmentId: "",
                payType: "",
                realName: "",
                createDateStart:"",
                createDateEnd:'',
                examineDateStart:'',
                examineDateEnd:'',
                studentDataFrom:[],
                payTimeStart:'',
                payTimeEnd:''
            }
            this.findPage(null)
        },
        // 查看
        handleSee(row){
            this.$router.push({
                path: "/OrderInfoMange/OrderListInfo",
                query: {
                    sno: row.row.orderChildNo,
                    goodsType:row.row.goodsType,//商品类型
                    type:1,//1查看 2审核
                }
            });
        },
        handleEdit(row){
            this.student_data_from_options2.forEach(type_item => {
                if (type_item.key ==row.row.studentDataFrom) {
                    row.row.laiyuan = type_item.value;
                }
            });
            let data={...row.row}
            data.gradeList=this.studentGradeDL
            data.activeName=row.row.type.toString()
            data.name=row.row.studentName
            data.phone=row.row.studentPhone
            data.grade=row.row.studentGrade
            data.studentUserName=row.row.studentUserName
            data.OVOgoodsName=row.row.goodsName
            this.checkOrderData=data
            this.checkOrderShow = true;
        },
        closeCheckOrderShow() {
            this.checkOrderShow = false;
        },
        // 审核
        handleReview(row){
            this.$router.push({
                path: "/OrderInfoMange/OrderListInfo",
                query: {
                    sno: row.row.orderChildNo,
                    goodsType:row.row.goodsType,//商品类型
                    type:2,//1查看 2审核
                }
            });
        },
        // 改单申请
        changeOrder(){

        },
        refundOrder(row){
            console.log(row)
            this.getOrderInfo(row)
            // this.refundOrderData=({orderGoods:row.row.orderGoods[0],studentBigcOrderInfoVO:row.row.studentBigcOrderInfoVO})
           
        },
        // 获取订单详情
        getOrderInfo(row){
            console.log(row)
            this.$api.student
            .queryOrderDetailInfo({
                goodsType:row.row.goodsType?row.row.goodsType:'',
                sno:row.row.orderChildNo
            })
            .then(res => {
                if (res.result == 2) {
                    this.$message({ message: res.msg, type: 'error' });
                } else {
                    this.refundOrderData=({orderGoods:res.data.orderGoods[0],studentBigcOrderInfoVO:res.data.studentBigcOrderInfoVO})   
 this.refundOrderShow=true
                }
            });
        },
        closeRefundOrder(){
            this.refundOrderShow=false
        },
    },
    mounted() {
        
    }
};
</script>
<style>
@import url("../../assets/queryBox.css");
</style>
<style lang="scss" scope>
.OrderList{
    .schoolBoxCont {
    margin: 5px 5px;

    .schoolBoxContItem {
        margin-right: 5px;
        float: left;
        .el-form-item__content {
            display: flex;
            flex-direction: row;
        }
        .schoolBoxContItemTitle {
            background: #f5f7fa;
            width: 115px;
            border: 1px solid #dcdfe6;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
            line-height: 39px;
            border-right: none;
        }
        .schoolBoxContItemInput {
            width: 150px;
            line-height: 39px;
            .el-date-editor.el-input,
            .el-date-editor.el-input__inner {
                width: 100%;
            }
        }
    }
}
}

</style>
